<template>
  <div class="home">
    <!-- 顶部 -->
    <chart-top :chartData="chartData"></chart-top>
    <!-- 中间 -->
    <chart-main :x="chartData.orderFullYearAxis"  :saleArr="chartData.orderFullYear" :visiteArr="chartData.userFullYear" :arr="chartData.orderRank" :arr1="chartData.userRank"></chart-main>
    <!-- 底部 -->
    <chart-footer :searchWord="chartData.searchWord"></chart-footer>
  </div>
</template>

<script setup lang="ts">
//引入请求函数
import { reqChartsData } from "../../api/home/home";
//引入相应的子组件
import ChartTop from "./ChartTop/index.vue";
import ChartMain from "./ChartMain/index.vue";
import ChartFooter from "./ChartFooter/index.vue";
//引入钩子
import { onMounted,ref} from "vue";
let chartData = ref({});
//测试mock数据能否获取到
onMounted(async () => {
  let result = await reqChartsData();
  //存储数据可视化数据
  chartData.value = result;
});
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  background: url(./1.gif);
  padding: 40px;
}
</style>